<template>
   <ul class="infinite-list" infinite-scroll-distance="10" v-infinite-scroll="load" style="overflow:auto">
    <li v-for="(item,key) in datas" :key="key" class="infinite-list-item">
            <div class="lismessagetop">
                <div class="lismessagetopImg">
                    <img  :src="require('../../assets/img/'+(key % 2 ==0?'tou.png':'ico.png'))" alt="">
                </div>
                  <span>{{item.resource}}&nbsp;{{item.author}}</span><br>
                    <span>06/06发布</span>
        </div>
        <div class="lisContent">
            <span class="nowrap">{{item.topic}}</span>
        </div>
         <div class="lisContent1">
            <span class="nowrap">{{item.shortContent}}</span>
        </div>
    </li>
  </ul>
</template>

<script>
export default {
 data () {
      return {
        count: 0,
        datas:[]
      }
    },
    methods: {
      load () {
        this.count += 1
      }
    },
        created:async function(){
        let {data} = await this.$http.get("/home/api/gettoutiao")
        this.datas=data.Data
       }
        // let times =  this.datas[0].checkDate.split("-")[1].split(")")[0]*1
        // let date = new Date(times)

        
       
  }
</script>

<style scoped>
.infinite-list{
    height: 11rem;
    background-color: #f5f5f5;
}
.infinite-list-item{
    height: 3.75rem;
    width: 100%;
    margin-bottom: .15rem;
    padding: .3rem;
    background-color: white;
    position: relative;
    overflow: hidden;
}
.lismessagetop{
    height: .8rem;
    width: 100%;
    font-size: .25rem;
}
.lismessagetopImg{
    height: 1.2rem;
    width: .65rem;
    margin-right: .26rem;
    float: left;
}
.lismessagetopImg>img{
    display: inline-block;
    width: .65rem;
    height: .65rem;
    
}
.lisContent{
    margin-top:.4rem;
    font-size: .3rem;
    color: black;
    margin-bottom: .2rem;
}
.lisContent1{
    font-size: .2rem;
    color: #999;
}
</style>